<template>
  <div class="table-responsive mt-4">
    <table class="table table-hover">
      <thead>
        <tr>
          <th scope="col">(#) Id</th>
          <th scope="col">Name</th>
          <th scope="col">Date</th>
          <th scope="col">Status</th>
          <th scope="col">Price</th>
          <th scope="col">Quantity</th>
          <th scope="col" colspan="2">Amount</th>
          <!-- <th scope="col" colspan="2">Amount</th> -->
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">#16252</th>
          <td>
            <div>
              <img
                src="assets/images/users/avatar-2.jpg"
                alt=""
                class="thumb-sm rounded-circle mr-2"
              />
              Rafael Reardon
            </div>
          </td>
          <td>14/10/2018</td>
          <td><span class="badge badge-success">Delivered</span></td>
          <td>$80</td>
          <td>1</td>
          <td>$80</td>
          <td>
            <div>
              <a href="#" class="btn btn-primary btn-sm">Edit</a>
            </div>
          </td>
        </tr>
        <tr>
          <th scope="row">#16253</th>
          <td>
            <div>
              <img
                src="assets/images/users/avatar-3.jpg"
                alt=""
                class="thumb-sm rounded-circle mr-2"
              />
              Thomas Hirsch
            </div>
          </td>
          <td>15/10/2018</td>
          <td><span class="badge badge-warning">Pending</span></td>
          <td>$76</td>
          <td>2</td>
          <td>$152</td>
          <td>
            <div>
              <a href="#" class="btn btn-primary btn-sm">Edit</a>
            </div>
          </td>
        </tr>
        <tr>
          <th scope="row">#16254</th>
          <td>
            <div>
              <img
                src="assets/images/users/avatar-4.jpg"
                alt=""
                class="thumb-sm rounded-circle mr-2"
              />
              Archer Desaillly
            </div>
          </td>
          <td>15/10/2018</td>
          <td><span class="badge badge-success">Delivered</span></td>
          <td>$86</td>
          <td>1</td>
          <td>$86</td>
          <td>
            <div>
              <a href="#" class="btn btn-primary btn-sm">Edit</a>
            </div>
          </td>
        </tr>
        <tr>
          <th scope="row">#16255</th>
          <td>
            <div>
              <img
                src="assets/images/users/avatar-5.jpg"
                alt=""
                class="thumb-sm rounded-circle mr-2"
              />
              Michael Flannery
            </div>
          </td>
          <td>16/10/2018</td>
          <td><span class="badge badge-danger">Cancel</span></td>
          <td>$82</td>
          <td>2</td>
          <td>$164</td>
          <td>
            <div>
              <a href="#" class="btn btn-primary btn-sm">Edit</a>
            </div>
          </td>
        </tr>
        <tr>
          <th scope="row">#16256</th>
          <td>
            <div>
              <img
                src="assets/images/users/avatar-6.jpg"
                alt=""
                class="thumb-sm rounded-circle mr-2"
              />
              Jamie Fishbourne
            </div>
          </td>
          <td>17/10/2018</td>
          <td><span class="badge badge-success">Delivered</span></td>
          <td>$84</td>
          <td>2</td>
          <td>$84</td>
          <td>
            <div>
              <a href="#" class="btn btn-primary btn-sm">Edit</a>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  name: "fo-table",
  props: {},
  setup(props, context) {},
});
</script>
<style scoped lang="less">
.table-responsive {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  .table {
    width: 100%;
    color: #212529;
    border-collapse: collapse;
    th,
    td {
      vertical-align: middle;
      border-top: 1px solid #dee2e6;
      padding: 0.75rem;
    }
    thead th {
      vertical-align: bottom;
      border-bottom: 2px solid #dee2e6;
      // font-weight: 600;
    }
    tbody tr:hover {
      background-color: #eff3f6;
    }
    tbody > tr > td,
    tfoot > tr > td,
    thead > tr > td {
      padding: 15px 12px;
      text-align: center;
    }
  }
}
</style>
